<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body>

<!--layui公共模块-->
<div>
    <!--添加和修改弹出层-->
    <div id="addOrUpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
        <form action="" method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="id">
                        <input type="text" name="name" lay-verify="required" autocomplete="off"
                               class="layui-input input-radius" placeholder="请输入菜单名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input type="text" name="age" lay-verify="required|number" autocomplete="off"
                               class="layui-input input-radius" placeholder="请输入菜单地址">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required" autocomplete="off"
                               class="layui-input input-radius" placeholder="请输入菜单图标">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-block">
                        <input type="text" name="card" lay-verify="required" autocomplete="off"
                               class="layui-input input-radius" placeholder="请输入target">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">核酸类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="type" autocomplete="off" class="layui-input input-radius"
                               placeholder="请输入菜单图标">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">核酸报告</label>
                    <div class="layui-input-block">
                        <input type="text" name="result" autocomplete="off" class="layui-input input-radius"
                               placeholder="请输入target">
                    </div>
                </div>
            </div>

            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">检测时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="createTime" class="layui-input" lay-verify="required" id="test1"
                                   placeholder="yyyy-MM-dd HH:mm:SS">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">报告时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="updateTime" class="layui-input" id="test2"
                                   placeholder="yyyy-MM-dd HH:mm:SS">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;padding-right: 7%">
                    <button type="button" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="doSubmit"
                            id="doSubmit"><i
                            class="layui-icon layui-icon-search layui-icon-normal"></i>提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i
                            class="layui-icon layui-icon-refresh"></i><span>重置</span>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!--查询条件-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
        <legend>搜索条件</legend>
    </fieldset>
    <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" class="layui-input input-radius" placeholder="请输入姓名">
                </div>
            </div>
            <div class="layui-inline" style="text-align: center;padding-right: 15%;">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit=""
                        lay-filter="doSearch"><i
                        class="layui-icon layui-icon-search layui-icon-normal"></i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                        class="layui-icon layui-icon-refresh"></i><span>重置</span>
                </button>
            </div>
        </div>
    </form>


    <!--数据表格-->
    <div>
        <table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
        <div id="menuToolBar" style="display: none">
<!--            <button type="button" lay-event="add" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius">-->
<!--                <i class="layui-icon layui-icon-add-1"></i>添加核酸检测-->
<!--            </button>-->
        </div>
<!--        <div id="menuRowBar" style="display: none;">-->
<!--            <button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-btn-radius"><i-->
<!--                    class="layui-icon layui-icon-edit"></i>编辑-->
<!--            </button>-->
<!--            <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i-->
<!--                    class="layui-icon layui-icon-delete"></i>删除-->
<!--            </button>-->
<!--        </div>-->
    </div>

    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/layui_ext/dtree/dtree.js}"></script>
    <script type="text/javascript">

        //提升数据表格的作用域，因为底下还有一个reloadTable方法
        var tableIns;

        layui.extend({
            dtree: '/layui_ext/dtree/dtree'
        }).use(['jquery', 'form', 'layer', 'laydate', 'table', 'layedit', 'dtree','upload'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var dtree = layui.dtree;
            var laydate = layui.laydate;
            var upload = layui.upload;

            laydate.render({
                elem: '#test1',
                type: 'datetime'
            })
            laydate.render({
                elem: '#test2',
                type: 'datetime'
            })



            //初始化表格 加载数据
            tableIns = table.render({
                elem: "#menuTable",
                title: "核酸数据表格",
                url: "/hesuan/loadOneHeSuan",
                toolbar: "#menuToolBar",
                page: true,
                width: 1100,
                height: "full-130",
                cols: [ [
                    {field: 'id', title: 'ID', align: 'center', width: '80'},
                    {field: 'result', title: '核酸结果', align: 'center', width: '100', templet: function (d) {
                            return d.result === "阴性" ? '<span class="layui-badge layui-bg-green">阴性</span>' : '<span class="layui-badge layui-bg-red">阳性</span>';}},
                    {field: 'name', title: '姓名', align: 'center', width: '100'},
                    {field: 'age', title: '年龄', align: 'center', width: '150'},
                    {field: 'type', title: '类型', align: 'center', width: '100', templet: function (d) {
                            return d.type === "混检" ? '<span class="layui-badge layui-bg-green">混检</span>' : '<span class="layui-badge layui-bg-red">个检</span>';}},
                    {field: 'createTime', title: '检测时间', align: 'center', width: '110', templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
                    {field: 'updateTime', title: '报告时间', align: 'center', width: '110', templet: "<div>{{layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ] ],
                done: function (data, curr, count) {
                    //不是第一页时，如果当前返回的数据为0那么就返回上一页
                    if (data.data.length == 0 && curr != 1) {
                        tableIns.reload({
                            page: {
                                curr: curr - 1
                            }
                        })
                    }
                }
            });

            //监控模糊查询按钮事件
            form.on("submit(doSearch)", function (data) {
                tableIns.reload({
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            //监控工具条事件
            table.on("toolbar(menuTable)", function (obj) {
                switch (obj.event) {
                    case 'add':
                        openAddLayer();
                        break;
                }
                ;
            });

            //监控行工具条事件
            table.on("tool(menuTable)", function (obj) {
                //获取当前行数据
                var data = obj.data;
                switch (obj.event) {
                    case 'delete':
                        deleteMenu(data);
                        break;
                    case 'update':
                        updateMenu(data);
                        break;
                }
                ;
            });

            var mainIndex;
            var url;

            //打开添加弹出层
            function openAddLayer() {
                mainIndex = layer.open({
                    type: 1,
                    content: $("#addOrUpdateDiv"),
                    area: ['740px', '370px'],
                    title: '添加菜单',
                    success: function () {
                        $("#dataFrm")[0].reset();
                        //设置下拉树中父节点的值为空
                        $("#pid").val("");
                        url = "/hesuan/addHeSuan";
                    }
                });
            }

            //打开修改的弹出层
            function updateMenu(data) {
                mainIndex = layer.open({
                    type: 1,
                    content: $("#addOrUpdateDiv"),
                    area: ['740px', '370px'],
                    title: '修改菜单',
                    success: function () {
                        //清空原有的数据
                        $("#dataFrm")[0].reset();
                        //装载新的数据
                        form.val("dataFrm", data);
                        //选中之前的父级菜单  nodeId=data.pid
                        dtree.dataInit("menuTree", data.pid);
                        dtree.selectVal("menuTree");
                        url = "/hesuan/updateHeSuan";
                    }
                });
            }

            form.on("submit(doSubmit)", function (data) {
                $.post(url, data.field, function (res) {
                    if (res.code == 200) {
                        tableIns.reload();
                    }
                    layer.msg(res.msg);
                    layer.close(mainIndex);
                });
                return false;
            });

            //删除
            function deleteMenu(data) {
                layer.confirm('你确定要删除【' + data.title + '】这个菜单吗？', {icon: 3, title: '提示'}, function (index) {
                    $.post("/hesuan/deleteHeSuan", {id: data.id}, function (res) {
                        if (res.code == 200) {
                            tableIns.reload({
                                where: "",
                            });
                            //刷新下拉树
                            selectTree.reload();
                            //刷新左边的菜单树
                            window.parent.left.menuTree.reload();
                        }
                        layer.msg(res.msg);
                    });
                    layer.close(index);
                });
            }


        });

        //给其它页面刷新当前页面数据表格的方法
        function reloadTable(id) {
            tableIns.reload({
                where: {
                    id: id
                },
                page: {
                    curr: 1
                }
            });
        }

    </script>
</div>
</body>
</html>